<template>
  <div class="cate-container">
    <bread :params1="'商品管理'" :params2="'商品分类'"></bread>

    <el-card class="box-card">
      <el-button type="primary" @click="dialogFormVisibleAdd = true"
        >添加分类</el-button
      >

      <tree-table
        ref="table"
        :data="cateList"
        :columns="columns"
        show-index
        :index-text="'#'"
        stripe
        border
        :selection-type="false"
        :expand-type="false"
      >
        <!--  -->
        <!-- <template slot="action">
          <el-button type="primary">确 定</el-button>
        </template> -->

        <template slot="cat_level" scope="scope">
          <!-- <pre>{{scope.row}}</pre> -->
          <el-tag v-if="scope.row.cat_level == 0">一级</el-tag>
          <el-tag type="success" v-else-if="scope.row.cat_level == 1"
            >二级</el-tag
          >
          <el-tag type="warning" v-else>三级</el-tag>
        </template>

        <template slot="cat_deleted" scope="scope">
          <i v-if="!scope.row.cat_deleted" class="el-icon-success"></i>
          <i v-else class="el-icon-error"></i>
        </template>
      </tree-table>

      <!-- 分页 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="Number(cate.pagenum)"
        :page-sizes="[2, 4, 5, 10]"
        :page-size="cate.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </el-card>
  </div>
</template>

<script>
/* 按需导入 */
import { cate_api } from "@/api";

export default {
  data() {
    return {
      //  定义参数
      cate: {
        type: 3,
        pagenum: 2,
        pagesize: 10
      },
      total: 1,
      cateList: [],

      //  树形组件配置
      columns: [
        { label: "分类名称", align: "left", prop: "cat_name", tree: true },

        {
          label: "是否有效",
          align: "center",
          prop: "cat_deleted",
          template: "cat_deleted",
          type: "template"
        },
        {
          label: "排序",
          align: "center",
          prop: "cat_level",
          template: "cat_level",
          type: "template"
        },
        {
          label: "操作",
          align: "center",
          prop: "action",
          template: "action",
          type: "template",
          width: "180px"
        }
      ]
    };
  },
  created() {
    this.getCates();
  },

  methods: {
    //商品分类数据列表
    async getCates() {
      const { data: res } = await cate_api(this.cate);
      console.log(res.data, 5555555);
      this.cateList = res.data.result;
      this.total = res.data.total;
    },

    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`)
      /*
      这里是改变每一页喜爱是几条
      1-将获取的每页现实的条数赋值pagesize
      2-2-重新发送请求   ==传递的参数是改变后的参数值
      */
      this.cate.pagesize = val;
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`)

      /* 这里只要点击页码数 就会触发
      1-将获取的页码数赋值给pagenum
      2-重新发送请求   ==传递的参数是改变后的参数值
      */
      this.cate.pagenum = val; // 1-将获取的页码数赋值给pagenum
      this.getCates(); //  2-重新发送请求   ==传递的参数是改变后的参数值
    }
  }
};
</script>
<style scoped lang="less">
.cate-container {
  .el-card {
    margin: 20px 0;
    .el-button {
      margin-bottom: 20px;
    }
  }
}
</style>
